<template>
  <view>
    <nav-bar title="收货地址" backgroundColor="#115BAA" titleColor="#FFF"></nav-bar>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      outPaddingTop="20rpx"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
          正在加载数据，请稍后......
        </view>
        <view class="common-no-data" v-else-if="!addressList || addressList.length === 0">
          <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
          <view class="text">暂无数据</view>
        </view>
        <view v-else>
          <view
            class="address-item"
            v-for="(item, index) in addressList"
            :key="index"
            @click="clickAddressItem(item)"
          >
            <view class="person-box">
              <view class="person">收货人：{{ item.receiverName }}</view>
              <view class="phone">{{ item.phoneNumber }}</view>
            </view>
            <view class="address">{{ item.address }}</view>
            <view class="bottom-btn">
              <view
                :class="['default-address', item.isDefault === 1 ? 'default-item' : '']"
                @click.stop="clickDefault(item)"
              >
                <uni-icons class="icon" v-if="item.isDefault === 1" type="checkbox-filled" color="#2A82E4" size="18"></uni-icons>
                <uni-icons class="icon" v-else type="checkbox" color="#999" size="18"></uni-icons>
                默认地址
              </view>
              <view class="right-btn">
                <view class="edit" @click.stop="clickEdit(item)">
                  <uni-icons class="icon" type="compose" color="#999" size="18"></uni-icons>
                  编辑
                </view>
                <view class="delete" @click.stop="clickDelete(item)">
                  <uni-icons class="icon" type="trash" color="#999" size="18"></uni-icons>
                  删除
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </you-scroll>
    <view class="form_bottom_btn">
      <view class="btn-box">
        <view class="confirm" @click="clickAddAddress">新增地址</view>
      </view>
    </view>
    <you-popup
      :popupVisible="popupVisible"
      popupTitle="确认要删除该收货地址吗？"
      @cancel="popupVisible = false"
      @popupClose="popupVisible = false"
      @confirm="confirmDelete"
    ></you-popup>
  </view>
</template>

<script>
  import { baseIconUrl } from '@/config'
  import api_user from '@/api/user'
  export default {
    name: 'GoodsAddress',
    data() {
      return {
        baseIconUrl,
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        addressList: [],
        pageNum: 1,
        pageSize: 10,
        chooseExpress: {},
        popupVisible: false,
        deleteItem: {}
      }
    },
    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
      this.loadingHeight = this.$store.getters.heightData.noTabMainHeight - 20 + 'px'
      if (options.chooseExpress) {
        this.chooseExpress = JSON.parse(decodeURIComponent(options.chooseExpress))
      }
      this.getAddressList()
    },
    methods: {
      getAddressList() {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        api_user.fetchAddressList(params).then(res => {
          if (res.code !== 200) return
          this.addressList.push(...res.rows)
          this.isRequestSuccess = true
          this.total = res.total
        })
      },
      clickAddressItem(item) {
        const chooseExpress = encodeURIComponent(JSON.stringify(item))
        uni.redirectTo({
          url: `/subPages/userIndex/rehabilitationAids/orderConfirm?chooseExpress=${chooseExpress}&tabActive=express`
        })
      },
      clickAddAddress() {
        uni.navigateTo({
          url: `/subPages/userIndex/rehabilitationAids/addAddress`
        })
      },
      clickDefault(item) {
        const params = {
          id: item.id,
          isDefault: item.isDefault === 1 ? 2 : 1
        }
        api_user.defaultAddress(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: item.isDefault === 1 ? '已取消默认地址' : '成功设置默认地址',
            icon: 'none',
            mask: true
          })
          this.onRefresh()
        })
      },
      clickEdit(item) {
        uni.navigateTo({
          url: `/subPages/userIndex/rehabilitationAids/editAddress?id=${item.id}`
        })
      },
      clickDelete(item) {
        this.deleteItem = item
        this.popupVisible = true
      },
      confirmDelete() {
        const params = { ids: this.deleteItem.id }
        api_user.deleteAddress(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '删除成功!',
            icon: 'none',
            mask: true
          })
          this.popupVisible = false
          this.pageNum = 1
          this.addressList = []
          this.getAddressList()
        })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.addressList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getAddressList()
      },
      // 上拉加载
      loadMore() {
        if (this.addressList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getAddressList()
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .address-item {
    margin: 0 30rpx 20rpx;
    padding: 24rpx;
    border-radius: 20rpx;
    background-color: #FFF;
    .person-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      color: #000;
    }
    .address {
      margin: 24rpx 0;
      font-size: 28rpx;
      color: #999;
    }
    .bottom-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 2rpx solid #e5e5e5;
      padding-top: 24rpx;
      color: #999;
      font-size: 28rpx;
      .default-address,
      .right-btn {
        display: flex;
        align-items: center;
        .icon {
          margin-right: 10rpx;
        }
        .edit {
          margin-right: 40rpx;
        }
      }
      .default-item {
        color: #2A82E4;
      }
    }
  }
</style>
